<template>
	<div id="addre">
		<div class="addtitle">
			<div><router-link to="/address">〈</router-link></div>
			<span>新建收货地址</span>
			<span>保存</span>
		</div>
		<div class="additem_div">
			
				<div class="lable" v-for="item in inputss">
					<span>{{item.titel}}:&nbsp;</span>
					<input type="text" :placeholder="item.placeholder" />
				</div>
		

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inputss: [{
						titel: "所在城市",
						placeholder: "如北京市",
					},
					{
						titel: "小区/大厦/学校",
						placeholder: "如理工大学国防科技园",
					},
					{
						titel: "楼号-门牌号",
						placeholder: "A号楼B层",
					},
					{
						titel: "收货人",
						placeholder: "请填写收货人的姓名",
					},
					{
						titel: "联系电话",
						placeholder: "请填写收货人手机号",
					}
				],
				address: {
						"Name": "",
						"Tel": "13555555555",
						add: "北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 13层  "
					}
				}
			}
		}
</script>

<style scoped>
	#addre{
		background-color: #f8f8f8;
		height: 100%;
		position: fixed;
		width: 100%;
	}
	.addtitle {
		display: flex;
		justify-content: space-between;
		height: 44px;
		margin-top: 20px;
		background-color: #FFFFFF;
	}

	.addtitle :nth-child(1) {
		line-height: 44px;
		color: #B6B6B6;
		font-size: 16px;
		width: 4.8%;
		text-align: right;
	}

	.addtitle :nth-child(2) {
		line-height: 44px;
		font-size: 16px;
		color: #333333;
		font-family: PingFangSC-Regular;
	}

	.addtitle :nth-child(3) {
		line-height: 44px;
		font-size: 14px;
		color: #333333;
		font-family: PingFangSC-Regular;
		text-align: right;
		padding-right: 18px;
	}

	.additem_div {
		margin-top: 12px;
		background-color: #FFFFFF;
	}


	.additem_div  .lable {
		padding-top: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid #F1F1F1;
	}

	.additem_div  .lable :nth-child(1) {
		padding-left: 18px;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #666666;
		line-height: 20px;
	}

	.additem_div  .lable input {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		height: 20px;
		color: #333333;
		border: none;
		outline: none;
	}
</style>
